<template>
    <el-card class="system_dashboard_container">
        <div class="card_container">
            <div class="text1">账套建立时系统自动创建主角色（拥有访问所有功能的权限）、主账户（拥有主角色）。</div>
            <div class="text2">请先设置角色、账户、组织架构，再使用具体业务功能</div>
            <div class="text2">角色是多个功能权限的合集，账户可以绑定一个或者多个角色，该账户即拥有所绑定角色的权限合集，组织架构是使用单位内部部门、人员的信息，人员可与账户绑定</div>
            <el-row v-if="false">
                <el-col :span="8">
                    <div class="item_container" title="点击跳转设置角色" @click="handleClick('role')">
                        <svg-icon icon-class="icon-role" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">角色数量</div>
                            <div class="content_qty">{{ data.role_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转设置账户" @click="handleClick('user')">
                        <svg-icon icon-class="icon-account" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">账户数量</div>
                            <div class="content_qty">{{ data.user_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="item_container" title="点击跳转设置组织架构" @click="handleClick('person')">
                        <svg-icon icon-class="icon-person" class-name="icon" />
                        <div class="item_content">
                            <div class="content_title">员工数量</div>
                            <div class="content_qty">{{ data.person_num || 0 }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
export default {
    name: "masterDashboard",
    data() {
        return {
            data: {},
        };
    },
    created() {
        const _this = this;
        _this.$bus.$off('updateSystemDashboard').$on('updateSystemDashboard', () => {
            _this.init();
        });
    },
    mounted() {
    },
    methods: {
        init() {
            const _this = this;
            return _this.fetchData(_this.$api.API_QuerySystemDashboard).then(result => {
                _this.data = result.data || {};
            }).catch(() => {
            });
        },
        handleClick(type) {
            if (type === 'role') {
                this.$router.push('/role');
                return;
            }
            if (type === 'user') {
                this.$router.push('/user');
                return;
            }
            if (type === 'person') {
                this.$router.push('/sysGroupPerson');
            }
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.system_dashboard_container {

    /deep/.el-card__body {
        .card_container {
            width: 80%;
            margin: 0 auto;
            padding-top: 20px;
        }
    }

    /deep/ .text1 {
        font-size: 18px;
        padding-bottom: 30px;
    }

    /deep/ .text2 {
        font-size: 16px;
        padding-bottom: 30px;
    }

    /deep/ .item_container {
        padding: 10px 30px 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 200px;
        margin: 0 auto;

        .icon {
            font-size: 45px;
        }

        .item_content {
            height: 45px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;

            .content_title {
                font-size: 14px;
                color: #7F7F7F;
                font-weight: bold;
            }

            .content_qty {
                margin-right: 5px;
                font-size: 20px;
                color: #1890FF;
            }

        }
    }
}
</style>
